<template>
	<view class="login">
		<view class="layout">
			<view class="header">
				<image src="../../../static/image/log.png" mode="aspectFill"></image>
				<view class="text">
					<text class="title">劳务通</text>
					<text class="content">求职兼职找工作</text>
				</view>
			</view>
			<view class="aides"> 
			  <view class="line"></view>  
			  <text class="text-center">开店小助手</text>  
			  <view class="line"></view>  
			</view>
			<view class="manner">
				选择登录方式
			</view>
			<view class="microcomputer" >
				<view class="WeChat" @click="clickPopup">
					<image src="../../../static/image/WeChat-icon.png" mode="aspectFill"></image>
					<text>微信登录</text>
				</view>
				<navigator url="/pages/Application/Login-registration-pop-up/Log-in-with-your-phone-number">
					<view class="PhoneLogin">
						<image src="../../../static/image/Mobile-phone-login.png" mode="aspectFill"></image>
						<text>手机验证码</text>
				    </view>
				</navigator>
				
			</view>
		</view>
		
		<uni-popup ref="infoPopup" type="bottom">
			<view class="infoPopup">
				底部信息弹窗
			</view>
			
		</uni-popup>
	</view>
</template>

<script >
	import { ref } from "vue";
	
	//点击弹窗
	const infoPopup = ref(null);
	const clickPopup = () =>{
		infoPopup.value.open()
	}

</script>

<style lang="scss" scoped>
	.login{
		width: 100vw;
		height: 100vh;
		position: relative;
		.layout{
			padding: 400rpx 150rpx 0;
			max-width: 65vw;
			.header{
				display: flex;
				align-items: center;
				padding-top: -30vh;
				image{
					width: 140rpx;
					height: 140rpx;
					padding-right: 45rpx;
				}
				.text{
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					.title{
						font-size: 80rpx;
						color: #3773EA;
						font-weight: bold;
					}
					.content{
						font-size: 25rpx;
						color: #5C85EA;
						margin: 0 auto;
					}
				}
				
			}
			.aides{
				display: flex;  
				align-items: center;
				.line {  
				  height: 1px;  
				  background-color: rgb(92, 133, 244);  
				  flex: 1; 
				}   
				.text-center { 
					padding: 50rpx 20rpx;
				    color: #5C85EA;
				}
			}
			.manner{
				display: flex;
				justify-content: center;
				padding: 40rpx;
			}
			.microcomputer{
				
				padding-top: 50rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.WeChat{
					display: flex;
					justify-content: center;
					flex-direction: column;
					/* position: relative;
					z-index: 10; */
					image{
						width: 80rpx;
						height: 80rpx;
						margin: 0 auto 15rpx;
					}
				}
				.PhoneLogin{
					display: flex;
					justify-content: center;
					flex-direction: column;
					image{
						width: 80rpx;
						height: 80rpx;
						margin: 0 auto 15rpx;
					}
				}
			}
		}
	}
</style>
